import React, { useState } from "react";
import { Modal, Button } from "antd";

import AddressComponent from "../addresscomponent";

import "./index.css";
export default function CheckAddressComponent() {
  const [isModalVisible, setIsModalVisible] = useState(false);

  // 模态框
  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  function saveMessage() {
    console.log();
  }

  return (
    <div className="tyc_address_component">
      <h3>
        <i>收货人信息</i>
        <Button
          type="primary"
          className="tyc_new_address_btn1"
          onClick={showModal}
        >
          使用新地址
        </Button>
        <Modal
          width={700}
          hright={700}
          title="使用新地址"
          visible={isModalVisible}
          onOk={handleOk}
          onCancel={handleCancel}
          footer={[
            <Button
              className="tyc_addcart_btn"
              key="back"
              onClick={handleCancel}
            >
              返回
            </Button>,
            <Button
              className="tyc_addcart_btn"
              key="link"
              // href="https://www.bilibili.com/"
              onClick={saveMessage}
            >
              保存
            </Button>,
          ]}
        >
          <AddressComponent />
        </Modal>
      </h3>
      <ul className="tyc_address_message">
        <li>
          <input type="radio" name="address" id="tyc_address1" />
          <label htmlFor="tyc_address1">
            但小兵 北京 北京市 昌平区 天通苑明天第一城4号楼101
            固定电话010-21541589
          </label>
          <span>默认地址</span>
          <strong>设置为默认地址</strong>
          <div>
            <em>修改</em>
            <i>删除</i>
          </div>
        </li>
        <li>
          <input type="radio" name="address" id="tyc_address2" />
          <label htmlFor="tyc_address2">
            但小兵 北京 北京市 昌平区 天通苑明天第一城4号楼101
            固定电话010-21541589
          </label>
          <span>默认地址</span>
          <strong>设置为默认地址</strong>
          <div>
            <em>修改</em>
            <i>删除</i>
          </div>
        </li>
        <li>
          <input type="radio" name="address" id="tyc_address3" />
          <label htmlFor="tyc_address3">
            但小兵 北京 北京市 昌平区 天通苑明天第一城4号楼101
            固定电话010-21541589
          </label>
          <span>默认地址</span>
          <strong>设置为默认地址</strong>
          <div>
            <em>修改</em>
            <i>删除</i>
          </div>
        </li>
        <li>
          <input type="radio" name="address" id="tyc_address4" />
          <label htmlFor="tyc_address4">
            但小兵 北京 北京市 昌平区 天通苑明天第一城4号楼101
            固定电话010-21541589
          </label>
          <span>默认地址</span>
          <strong>设置为默认地址</strong>
          <div>
            <em>修改</em>
            <i>删除</i>
          </div>
        </li>
      </ul>
      <div className="tyc_more_address">
        <span>展开其他地址</span>
        <span>收起地址</span>
      </div>
    </div>
  );
}
